<template>

 


    <view class="imag-list">

      
            <view class="item" v-if="url" >
               <video :src="url" class="bg" />
            </view>
    

        <view class="item" @tap="addImag" >
            <image src="/static/images/upmedia_bg.png"  class="bg"/>
        </view>

    </view>
</template>
<script>

import {postUpLoadVideo} from '@/request/actions'


export default {
        props:{
           
                videoUrl:{
                    type:String,
                    default:''
                }
            ,
            cb:{
                type:String,
                default:''
            }
        },
        data(){
            return{
                 url:''
            }
           
        },
        methods:{
                addImag(){
                  
                   
                    const VIDEO_MAX_TIME = 60;
             
                     uni.chooseVideo({
                        compressed:true,
                        maxDuration:VIDEO_MAX_TIME,
                        success: res=> {
                            console.log(res)
                            let { duration } = res;
                               if(res.errMsg == "chooseVideo:ok"){
                                      


                                if(duration > VIDEO_MAX_TIME){
                                    return uni.showModal({
                                            content:`请上传视频需小于等于${VIDEO_MAX_TIME}秒`,
                                            showCancel:false
                                    })
                                }

                              uni.showLoading({
                                                mask:true
                                        })


                                    postUpLoadVideo(res.tempFilePath).then(r=>{
                                                  let {data:res} = r;
                                                    res = JSON.parse(res);
                                                    
                                                    console.log(res)
                                                    if(res.status == 200){
                                                            this.url = res.data;
                                                            this.$emit('setVideoUrl',this.url);
                                                       
                                                    }else{
                                                        uni.showToast({
                                                            title:res.message,
                                                            icon:'none'
                                                        })
                                                    }
                                                    uni.hideLoading()
                                                    
                                                    
                                                  
                                                   
                                                 

                                    })

                                  


                                }
                                   
                                  


                            },
                            fail:err=>{
                                console.log(err)
                            }
                        })

             
                }
        },
        watch:{
            videoUrl(n,o){
                if(n){
                    this.url = n;
                    console.log(this.url)
                 
                }
            }
        }
      
}
</script>
<style lang="scss">
    .imag{
        &-list{
            .item{
                display: inline-block;
                width: 145rpx;
                height: 145rpx;
                position: relative;
                margin-right: 10rpx;
                border-radius: 10rpx;
                overflow: hidden;
                &:last-child{
                    margin-bottom: 0;
                }
                 .bg{
                    width: 100%;
                    height: 100%;
                    position: relative;
                    z-index: 1;
                }
                .del{
                    position: absolute;
                    bottom:0;
                    right:0;
                    left:0;
                    height: 40rpx;
                    background: rgba(0,0,0,0.6);
                    z-index: 2;
                    image{
                        height: 30rpx;
                        width: 30rpx;
                        margin: 5rpx auto 0;
                        display: block;
                    }
                }
            }
           
        }
    }
</style>
